<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>联大商城</title>
    <link rel="stylesheet" href="../plugins/element-ui/index.css">
    <script src="../plugins/vue/vue.js"></script>
    <script src="../plugins/element-ui/index.js"></script>
    <script src="../plugins/axios/axios.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-image: url('../image/beijing1.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            margin: 0;
            padding: 0;
            height: 100vh;
            width: 100vw;
            overflow: hidden;
        }

        #app {
            background-color: rgba(255, 255, 255, 0.9);
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            width: 300px;
            height: auto;
            margin: auto;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
<h1>联大商城</h1>

<div id="app">
    <el-tabs v-model="activeTab">
        <el-tab-pane label="登录" name="login">
            <el-form @submit.prevent="loginUser">
                <el-form-item label="用户名">
                    <el-input v-model="loginForm.username" required></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input type="password" v-model="loginForm.password" required></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="loginUser">登录</el-button>
                </el-form-item>
            </el-form>
            <p>还没有账号？<a href="#" @click="activeTab = 'register'">注册</a></p>
        </el-tab-pane>
        <el-tab-pane label="注册" name="register">
            <el-form @submit.prevent="registerUser">
                <el-form-item label="用户名">
                    <el-input v-model="registerForm.username" required></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input type="password" v-model="registerForm.password" required></el-input>
                </el-form-item>
                <el-form-item label="确认密码">
                    <el-input type="password" v-model="registerForm.confirmPassword" required></el-input>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model="registerForm.email" required></el-input>
                </el-form-item>
                <el-form-item label="电话号码">
                    <el-input type="tel" v-model="registerForm.phone" required></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="registerUser">注册</el-button>
                </el-form-item>
            </el-form>
            <el-button type="primary" @click="loginUser">登录</el-button>
        <p v-if="errorMessage" style="color: red;">{{ errorMessage }}</p>
        </el-tab-pane>
    </el-tabs>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            activeTab: 'login',
            loginForm: {
                username: '',
                password: ''
            },
            registerForm: {
                username: '',
                password: '',
                confirmPassword: '',
                address: '',
                phone: ''
            },
            errorMessage: ''
        },
        methods: {
            loginUser() {
                const { username, password } = this.loginForm;

                axios.post('/user/login', { username, password })
                    .then(response => {
                        // Handle successful login
                        this.errorMessage = ''; // Clear error message on success
                        this.$notify({
                            title: 'Success',
                            message: '登录成功',
                            type: 'success'
                        });

                        // Store username in local storage
                        localStorage.setItem('username', username);
                        // Redirect to shop.html after notification
                        setTimeout(() => {
                            window.requestAnimationFrame(() => {
                                window.location.href = '/front/shop.html';
                            });
                        }, 10);
                    })
                    .catch(error => {
                        if (error.response && error.response.status === 401) {
                            this.errorMessage = '账号密码错误';
                        } else {
                            this.errorMessage = '账号密码错误';
                        }
                        this.$notify({
                            type: 'error',
                            title: 'Error',
                            message: this.errorMessage
                        });
                    });
            },
            registerUser() {
                axios.post('/user/register', this.registerForm)
                    .then(response => {
                        if (response.data === true) {
                            this.$notify({
                                title: 'Success',
                                message: '注册成功，跳转至登录页面',
                                type: 'success'
                            });
                            setTimeout(() => {
                                this.activeTab = 'login'; // Switch to login tab
                            }, 10); // Delay 1 second to ensure notification is shown
                        } else {
                            this.errorMessage = '您的输入有误,请检查后输入';
                            this.$notify({
                                type: 'error',
                                title: 'Error',
                                message: this.errorMessage
                            });
                        }
                    })
                    .catch(error => {
                        this.errorMessage = '您的输入有误,请检查后输入';
                        this.$notify({
                            type: 'error',
                            title: 'Error',
                            message: this.errorMessage
                        });
                        console.error(error);
                    });
            },

        }
    });
</script>
</body>
</html>